<template>
	<view class="video flex-col">
		<view class="video-title textmp-1">
			{{ cameraName }}
		</view>
		<view class="f1 h0">
			<video style="width: 100%; height: 100%" autoplay :show-fullscreen-btn="true" :direction="90"
				:show-play-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false" play-strategy="1"
				:src="playUrl" :title="cameraName" v-bind="$attrs" />
		</view>
	</view>
</template>

<script setup>
	import {
		getURLS,
		getName
	} from '@/api/customApi.js';

	const props = defineProps({
		cameraIndexCode: {},
		cameraName: {}
	});

	let playUrl = ref(''),
		cameraName = ref(props.cameraName),
		// playParams = ref({
		// 	cameraIndexCode: '',
		// 	streamType: 0,
		// 	protocol: 'rtmp',
		// 	transmode: 1,
		// 	expand: "transcode=0",
		// 	streamform: "ps"
		// })
		playParams = ref({
			cameraIndexCode: '',
			streamType: 0,
			protocol: 'rtsp',
			transmode: 1,
			expand: 'transcode=0',
			streamform: 'rtp'
		});

	async function getPlayUrl(cameraIndexCode) {
		// 获取播放流地址
		playParams.value.cameraIndexCode = cameraIndexCode;
		try {
			const res = await getURLS(playParams.value);

			if (res?.code == '0') playUrl.value = res.data.url.replace('rtsp://117.191.103.69:1554',
				'rtsp://117.191.103.69:20554');

			if (!cameraName.value) {
				getName({
					cameraIndexCode: cameraIndexCode
				}).then((res) => {
					cameraName.value = res.data.cameraName;
				});
			}
		} catch (e) {
			// uni.showModal({
			// 	content: '获取播放地址失败'
			// })
		}
	}

	watch(
		() => props.cameraIndexCode,
		(val) => {
			if (val) getPlayUrl(val);
		}, {
			immediate: true
		}
	);
</script>

<style scoped lang="scss">
	.video {
		width: 100%;
		height: 240rpx;
		position: relative;

		&-title {
			font-size: 20rpx;
			padding: 10rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #fff;
			width: 100%;
			box-sizing: border-box;
		}
	}
</style>